import { StyleSheet, View, Image } from 'react-native'
import React from 'react'
import { Text } from 'react-native-paper'
import type { ArticleComments } from '@/types/article'
import dayjs from 'dayjs'
import HeartAnimated from '@/components/HeartAnimated'

interface Props {
  comment: ArticleComments
}
const Comment: React.FC<Props> = ({ comment }) => {
  // 渲染评论右侧内容
  const renderRight = (comment: ArticleComments, show?: boolean) => {
    return (
      <View style={{ flexDirection: 'row', width: '100%' }}>
        {/* 右侧侧头像 */}
        {show && <Image source={{ uri: comment.avatarUrl }} style={styles.avatar}></Image>}
        {/* 左侧文字 */}
        <View style={styles.nameDescBox}>
          {/* 用户名 */}
          <Text style={styles.userNameTxt}>{comment.userName}</Text>
          {/* 评论内容 */}
          <Text style={styles.commentBox}>
            {comment.message}
            {'    '}
            <Text style={styles.timeLocationTxt}>
              {dayjs(comment.dateTime).format('MM-DD')} {comment.location}
            </Text>
          </Text>
        </View>
        {/* 右侧点赞和点赞数 */}
        <View style={styles.heartBox}>
          <HeartAnimated selected={comment.isFavorite} size={24}></HeartAnimated>
          <Text>
            {comment.favoriteCount < 1000
              ? comment.favoriteCount
              : `${(comment.favoriteCount / 1000).toFixed(0)}K`}
          </Text>
        </View>
      </View>
    )
  }
  return (
    <View style={styles.container}>
      {/* 左侧头像 */}
      <Image source={{ uri: comment.avatarUrl }} style={styles.avatar}></Image>
      {/* 右侧内容 */}
      <View style={styles.rightLayout}>
        {renderRight(comment)}
        {comment.children &&
          comment.children.map((item, index) => (
            <View key={`${item.avatarUrl}-${index}`} style={{ marginTop: 10 }}>
              {renderRight(item, true)}
            </View>
          ))}
      </View>
    </View>
  )
}

export default Comment

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row',
    marginBottom: 15,
    paddingHorizontal: 20
  },
  avatar: {
    width: 38,
    height: 38,
    resizeMode: 'contain',
    borderRadius: 20
  },
  rightLayout: {
    flex: 1,
    justifyContent: 'space-between',
    paddingBottom: 16,
    borderBottomColor: '#f6f6f6',
    borderBottomWidth: 1
  },
  nameDescBox: {
    flex: 1,
    marginLeft: 12
  },
  heartBox: {
    width: 28,
    alignItems: 'center'
  },
  userNameTxt: {
    color: '#999',
    marginBottom: 6
  },
  commentBox: {
    width: '100%'
  },
  timeLocationTxt: {
    color: '#999',
    fontSize: 14
  }
})
